<template>
    <el-row :gutter="50">
        <el-col :span="6">
            <el-form :model="saveForm">
                <el-form-item label="邮箱">
                    <el-input v-model="saveForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="saveForm.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="居住地址">
                    <el-input v-model="saveForm.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="saveForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveData" :loading="saving">更新信息</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="14">
            <div class="" style="line-height: 36px;">头像</div>
            <el-avatar :size="120" :src="employeeInfo.headImage"></el-avatar>
            <div class="mt-1 text-center" style="width: 120px">
<!--
    action: 设置文件上传路径
    on-success:上传成功的回调
    before-upload:上传前的回调
-->
                <el-upload
                    class="avatar-uploader"
                    :action="apiUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <el-button size="small">更换头像<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import api from "@/services/api";
import {mapState} from 'vuex'

export default {
    name: "UserBasic",
    data() {
        return {
            apiUrl: api.API_URL + '/upload',
            saving: false,
            saveForm: {
                headImage: '',
                email: '',
                nickname: '',
                address: '',
                phone: '',
            }
        }
    },
    computed: {
        ...mapState(['employeeInfo'])
    },
    async mounted() {
        try {
            this.saveForm = await api.get('/emp/get-detail');
        } catch (e) {

        }

    },
    methods: {
        saveData() {
            this.saving = true;
            api.post('/emp/save-detail', this.saveForm).then(() => {

            }).finally(() => {
                this.saving = false;
            })
        },
        uploadAvatar() {
            api.post('/emp/save-detail', this.saveForm).then(() => {

            }).finally(() => {
                this.saving = false;
            })
        },
        handleAvatarSuccess(res, file) {
            if (res && res.code == 0) {
                const emp = this.employeeInfo;
                const {path, url} = res.data;
                // 先同步vuex的数据
                emp.headImage = url;
                this.$store.commit('saveEmployeeInfo', emp)
                // 更新后端的头像
                api.post('/emp/update-info', {
                    headImage: url
                }).then(() => {

                }).finally(() => {
                    this.saving = false;
                })
            } else {
                this.$message.error('上传头像失败:' + res.message);
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
